<template>
  <div>
    <!--顶部组件-->
    <el-row :gutter="10">
      <el-col :span="6">
        <Card>
          <template #header>
            <div>今日销售</div>
          </template>
          <template #number>
            <div>
              {{ data.salesToday }}
            </div>
          </template>
          <template #chart>
            <div style="font-size: 14px">
              日同比:{{ data.salesGrowthLastDay
              }}<svg
                t="1673064197052"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11981"
                width="14"
                height="14"
              >
                <path
                  d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
                  p-id="11982"
                  fill="#1afa29"
                ></path>
              </svg>
            </div>
            <div>
              月同比:{{ data.salesGrowthLastMonth
              }}<svg
                t="1673064163696"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="10951"
                width="14"
                height="14"
              >
                <path
                  d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 420.3 185.3-185.3c12.5-12.5 32.8-12.5 45.2 0l147.1 147.1 157.7-157.7-32.6-32.6c-11.9-11.9-6.5-32.3 9.8-36.6L751.7 341c16.3-4.4 31.2 10.5 26.8 26.8l-38.4 143.1c-4.4 16.3-24.7 21.7-36.6 9.8l-26.9-26.9L496.2 674.1c-12.5 12.5-32.8 12.5-45.2 0L303.9 527l-198 198c-2.9 2.9-6.3 5-9.9 6.6l0 68.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
                  p-id="10952"
                  fill="#d81e06"
                ></path>
              </svg>
            </div>
          </template>
          <template #footer>
            <div>昨日销售额:{{ data.salesLastDay }}</div>
          </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
            <div>今日订单</div>
          </template>
          <template #number>
            <div>{{ data.orderToday }}</div>
          </template>
          <template #footer>
            <div>昨日订单:{{ data.orderLastDay }}</div>
          </template>
          <template #chart>
            <Line :orderTrend="data.orderTrend" v-if="data.orderTrend"></Line>
          </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
            <div>今日交易用户</div>
          </template>
          <template #number>
            <div>
              {{ data.orderUser }}
            </div>
          </template>
          <template #footer>
            <div>退货率:{{ data.returnRate }}</div>
          </template>
          <template #chart>
            <Bar :orderUserTrend="data.orderUserTrend"></Bar>
          </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
            <div>累计用户</div>
          </template>
          <template #number>
            <div>{{ data.usersTotal }}</div>
          </template>
          <template #footer>
            <div>日同比:{{data.userGrowthLastDay}}% &nbsp;&nbsp; 月同比:{{data.userGrowthLastMonth}}%</div>
          </template>
          <template #chart>
             <Progress></Progress>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Card from "./Card/index.vue";
import Line from "./Line/index.vue";
import Bar from "./Bar/index.vue";
import Progress from './Progress/index.vue'
let props = defineProps(["data"]);
</script>

<style scoped>
</style>